<template>
  <view class="password-container">
    <!-- 密码输入区域 -->
    <view class="input-wrapper" :class="{ 'shake': isError, 'focused': isFocused }">
      <text class="icon-lock">🔒</text>
      <input 
        class="password-field"
        :type="showPassword ? 'text' : 'password'"
        v-model="password"
        @focus="isFocused = true"
        @blur="isFocused = false"
        @input="handleInput"
        placeholder="输入密码"
        placeholder-class="placeholder"
        maxlength="20"
      />
      <view class="visibility-toggle" @click="toggleVisibility">
        <view class="eye-icon" :class="{ 'visible': showPassword }">
          <view class="eye-lid"></view>
          <view class="eye-pupil"></view>
        </view>
      </view>
    </view>

    <!-- 密码强度指示器 -->
    <view class="strength-indicator" v-if="password.length > 0">
      <text class="strength-label">密码强度:</text>
      <view class="strength-bars">
        <view 
          v-for="i in 3" 
          :key="i"
          class="strength-bar"
          :class="{
            'weak': i === 1 && passwordStrength >= 1,
            'medium': i <= 2 && passwordStrength >= 2,
            'strong': i <= 3 && passwordStrength >= 3,
            'animated': passwordStrength >= i
          }"
        ></view>
      </view>
      <text class="strength-text">{{ strengthText }}</text>
    </view>

    <!-- 提交按钮 -->
    <view 
      class="submit-button"
      :class="{ 'active': isValidPassword }"
      @click="handleSubmit"
    >
      <text class="button-text">{{ buttonText }}</text>
      <view class="button-arrow">→</view>
    </view>

    <!-- 错误提示 -->
    <view class="error-message" v-if="isError">
      <text class="error-icon">⚠️</text>
      <text>{{ errorMessage }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isConfirm: Boolean,
    initialPassword: String,
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      password: '',
      showPassword: false,
      isError: false,
      isFocused: false,
      errorMessage: ''
    }
  },
  computed: {
    passwordStrength() {
      if (!this.password) return 0
      
      let score = 0
      // 长度得分
      if (this.password.length >= 6) score++
      if (this.password.length >= 10) score++
      
      // 复杂度得分
      const hasLower = /[a-z]/.test(this.password)
      const hasUpper = /[A-Z]/.test(this.password)
      const hasNumber = /\d/.test(this.password)
      const hasSpecial = /[^a-zA-Z0-9]/.test(this.password)
      
      const complexity = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean).length
      score += Math.min(complexity, 2)
      
      return Math.min(score, 3)
    },
    strengthText() {
      const texts = ['低', '中', '高']
      return texts[this.passwordStrength - 1] || ''
    },
    isValidPassword() {
      if (this.isConfirm) {
        return this.password === this.initialPassword && this.password.length >= 6
      }
      return this.password.length >= 6
    },
    buttonText() {
      if (this.loading) return '验证中...'
      return this.isConfirm ? '确认密码' : '设置密码'
    }
  },
  methods: {
    toggleVisibility() {
      if (this.loading) return
      this.showPassword = !this.showPassword
    },
    handleInput() {
      if (this.loading) return
      this.isError = false
      this.$emit('input', this.password)
    },
    handleSubmit() {
      if (this.loading || !this.isValidPassword) {
        if (!this.isValidPassword) {
          this.isError = true
          this.errorMessage = this.isConfirm ? 
            '两次密码不一致' : 
            '密码至少需要6位字符'
        }
        return
      }
      this.$emit('submit', this.password)
    },
    clear() {
      this.password = ''
      this.isError = false
    },
    setError(message) {
      this.isError = true
      this.errorMessage = message || '密码错误'
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.password-container {
  width: 100%;
  max-width: 600rpx;
  margin: 0 auto;
  padding: 40rpx;
  box-sizing: border-box;
}

/* 输入框容器 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 25rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10rpx);
}

.input-wrapper.focused {
  border-color: #4a90e2;
  box-shadow: 0 5rpx 20rpx rgba(74, 144, 226, 0.3);
  transform: translateY(-2rpx);
}

.input-wrapper.shake {
  animation: shake 0.5s ease;
  border-color: #ff4d4d !important;
  box-shadow: 0 5rpx 20rpx rgba(255, 77, 77, 0.3);
}

/* 锁图标 */
.icon-lock {
  font-size: 40rpx;
  margin-right: 20rpx;
  color: #4a90e2;
}

/* 密码输入框 */
.password-field {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: #333;
  background: transparent;
}

.placeholder {
  color: #b0b0b0;
  font-size: 32rpx;
}

/* 眼睛图标切换按钮 */
.visibility-toggle {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.visibility-toggle:hover {
  background: rgba(74, 144, 226, 0.1);
}

.eye-icon {
  position: relative;
  width: 36rpx;
  height: 36rpx;
  background: #4a90e2;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.eye-icon.visible {
  background: #7cb342;
}

.eye-pupil {
  position: absolute;
  width: 16rpx;
  height: 16rpx;
  background: white;
  border-radius: 50%;
  top: 10rpx;
  left: 10rpx;
}

.eye-lid {
  position: absolute;
  width: 36rpx;
  height: 8rpx;
  background: inherit;
  top: -4rpx;
  left: 0;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.eye-icon.visible .eye-lid {
  transform: scaleY(0.2) translateY(-10rpx);
}

/* 密码强度指示器 */
.strength-indicator {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 20rpx;
  border-radius: 15rpx;
  backdrop-filter: blur(10rpx);
}

.strength-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 20rpx;
}

.strength-bars {
  flex: 1;
  display: flex;
  height: 10rpx;
  gap: 10rpx;
}

.strength-bar {
  flex: 1;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5rpx;
  transition: all 0.5s ease;
}

.strength-bar.weak {
  background: #ff5252;
  box-shadow: 0 0 10rpx rgba(255, 82, 82, 0.5);
}

.strength-bar.medium {
  background: #ffc107;
  box-shadow: 0 0 10rpx rgba(255, 193, 7, 0.5);
}

.strength-bar.strong {
  background: #4caf50;
  box-shadow: 0 0 10rpx rgba(76, 175, 80, 0.5);
}

.strength-bar.animated {
  animation: pulse 1.5s infinite alternate;
}

.strength-text {
  margin-left: 20rpx;
  font-size: 26rpx;
  font-weight: bold;
  min-width: 50rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* 提交按钮 */
.submit-button {
  margin-top: 50rpx;
  height: 90rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 32rpx;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10rpx);
  cursor: pointer;
}

.submit-button.active {
  background: linear-gradient(135deg, #4a90e2, #2b6cb0);
  color: white;
  transform: translateY(-3rpx);
  box-shadow: 0 8rpx 20rpx rgba(74, 144, 226, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.submit-button:active {
  transform: translateY(-1rpx);
}

.button-text {
  transition: all 0.3s ease;
}

.button-arrow {
  margin-left: 10rpx;
  opacity: 0;
  transform: translateX(-20rpx);
  transition: all 0.3s ease;
}

.submit-button.active .button-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* 错误提示 */
.error-message {
  margin-top: 30rpx;
  color: #ff5252;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  animation: fadeIn 0.3s ease;
  background: rgba(255, 82, 82, 0.1);
  padding: 20rpx;
  border-radius: 15rpx;
  border: 2rpx solid rgba(255, 82, 82, 0.3);
}

.error-icon {
  margin-right: 10rpx;
}

/* 动画效果 */
@keyframes pulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10rpx); }
  40%, 80% { transform: translateX(10rpx); }
}
</style>